<template>
    <WidgetContainer :widget-id="config.id">
        <FormItemWidget :config="config" :rowIndex="rowIndex" :parentId="parentId">
            <div :class="config.attributes?.cssClass" class="editor-box">
                <QuillEditor v-if="!formConfig.disabled" style="min-height: 300px; width: 100%;" content-type="html"
                    v-model:content="fieldValue" theme="snow" :read-only="config.attributes.disabled"
                    :placeholder="config.attributes.placeholder" :modules="modules" toolbar="full"
                    @textChange="handleChange" />
                <div v-else v-html="fieldValue"></div>
            </div>
        </FormItemWidget>
    </WidgetContainer>
</template>

<script setup>
import { inject, onMounted } from 'vue'

import { QuillEditor } from '@vueup/vue-quill'
import BlotFormatter from 'quill-blot-formatter'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

import { useFieldBinding } from '@/utils/useFieldBinding'
import { executeEventHandler } from '@/utils/eventExecutor'

const formData = inject('formData')
const widgetList = inject('widgetList')
const formConfig = inject('formConfig')

const modules = {
    name: 'blotFormatter',
    module: BlotFormatter,
    options: {}
}

const props = defineProps({
    config: Object,
    rowIndex: Number,
    parentId: String
})

const { fieldValue } = useFieldBinding(formData, props.config, {
    rowIndex: props.rowIndex,
    parentId: props.parentId
})


onMounted(() => {
    executeEventHandler(props.config.events?.onMounted,
        { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value }
    )
})

const handleChange = (value) => {
    executeEventHandler(props.config.events?.onChange,
        { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value, value }
    )
}
</script>

<style>
.editor-box {
    width: 100%;
}
</style>